<template>
    <div class="box">
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px"
            class="demo-ruleForm">
            <el-form-item label="品牌名称：" prop="name">
                <el-input v-model="ruleForm.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="品牌首字母：" prop="firstLetter">
                <el-input v-model="ruleForm.firstLetter" autocomplete="off" />
            </el-form-item>
            <el-form-item label="品牌LOGO：" prop="logo">
                <el-upload ref="upload" class="upload-demo" action="http://127.0.0.1:5173/api/minio/upload"
                    :on-preview="handleLogoPreview" :on-remove="handleLogoRemove" :on-success="handleLogoSuccess"
                    list-type="picture" :limit="1" :on-exceed="handleLogoExceed">
                    <el-button type="primary">点击上传</el-button>
                    <template #tip>
                        <div class="el-upload__tip">只能上传jpg/png文件，且不超过100kb</div>
                    </template>
                </el-upload>
            </el-form-item>
            <el-form-item label="品牌专区大图：" prop="bigPic">
                <el-upload ref="BigUpload" class="upload-demo" action="http://127.0.0.1:5173/api/minio/upload"
                    :on-preview="handleBigPicPreview" :on-remove="handleBigPicRemove" :on-success="handleBigPicSuccess"
                    list-type="picture" :limit="1" :on-exceed="handleBigPicExceed">
                    <el-button type="primary">点击上传</el-button>
                    <template #tip>
                        <div class="el-upload__tip">只能上传jpg/png文件，且不超过100kb</div>
                    </template>
                </el-upload>
            </el-form-item>
            <el-form-item label="品牌故事">
                <el-input autocomplete="off" :rows="1" type="textarea" placeholder="请输入内容"
                    v-model="ruleForm.brandStory" />
            </el-form-item>
            <el-form-item label="排序">
                <el-input v-model="ruleForm.sort" autocomplete="off" />
            </el-form-item>
            <el-form-item label="是否显示">
                <el-radio-group class="ml-4" v-model="ruleForm.showStatus">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="品牌制造商">
                <el-radio-group class="ml-4" v-model="ruleForm.factoryStatus">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm()">提交</el-button>
                <el-button @click="resetForm()">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang='ts'>
import { reactive, ref } from 'vue';
import { ElMessage, ElMessageBox, FormInstance, genFileId } from 'element-plus'
import type { UploadProps, UploadRawFile, UploadInstance } from 'element-plus'

import { BrandCreateApi } from './api';
import router from '@/router';

const ruleFormRef = ref<FormInstance>();

const ruleForm = reactive<IBrandCreate>({
    bigPic: "",
    brandStory: "",
    factoryStatus: 0,
    firstLetter: "",
    logo: "",
    name: "",
    showStatus: 0,
    sort: 0,
})

const rules = reactive({
    name: [
        { required: true, message: "请输入品牌名称", trigger: "blur" },
        { min: 2, max: 140, message: "长度在 2 到 140 个字符", trigger: "blur" },
    ],
    logo: [{ required: true, message: "请输入品牌logo", trigger: "change" }],
})

// 	文件列表移除文件时的钩子
const handleLogoRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
    ruleForm.logo = ''
}

// 	文件上传成功时的钩子
const handleLogoSuccess: UploadProps['onSuccess'] = (uploadFile) => {
    ruleForm.logo = uploadFile.data.url as string

}

// 点击文件列表中已上传的文件时的钩子
const handleLogoPreview: UploadProps['onPreview'] = (file) => {
    console.log(file)
}

// 品牌专区大图
// 	文件列表移除文件时的钩子
const handleBigPicRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
    ruleForm.bigPic = ''
}

// 	文件上传成功时的钩子
const handleBigPicSuccess: UploadProps['onSuccess'] = (uploadFile) => {
    ruleForm.bigPic = uploadFile.data.url
}

// 点击文件列表中已上传的文件时的钩子
const handleBigPicPreview: UploadProps['onPreview'] = (file) => {
    console.log(file)
}

const upload = ref<UploadInstance>()
const BigUpload = ref<UploadInstance>()

const handleLogoExceed: UploadProps['onExceed'] = (files) => {
    upload.value!.clearFiles()
    const file = files[0] as UploadRawFile
    file.uid = genFileId()
    upload.value!.handleStart(file)
}

const handleBigPicExceed: UploadProps['onExceed'] = (files) => {
    BigUpload.value!.clearFiles()
    const file = files[0] as UploadRawFile
    file.uid = genFileId()
    BigUpload.value!.handleStart(file)
}

const submitForm = () => {
    if (!ruleForm.name) {
        ElMessage.error('请输入品牌名称')
        return
    }
    if (!ruleForm.firstLetter) {
        ElMessage.error('请输入品牌首字母')
        return
    }
    if (!ruleForm.logo) {
        ElMessage.error('请上传品牌logo')
        return
    }
    if (!ruleForm.brandStory) {
        ElMessage.error('请输入品牌故事')
        return
    }
    ElMessageBox.confirm("是否提交数据", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(() => {
        BrandCreateApi(ruleForm).then(res => {
            if (res.code === 200) {
                ElMessage.success('提交成功')
                router.push('/pms/brand')
            }
        })
    })

}

const resetForm = () => {
    ruleForm.bigPic = '';
    ruleForm.brandStory = '';
    ruleForm.factoryStatus = 0;
    ruleForm.firstLetter = '';
    ruleForm.logo = '';
    ruleForm.name = '';
    ruleForm.showStatus = 0;
    ruleForm.sort = 0
}
</script>

<style lang="less" scoped>
.box {
    width: 700px;
    border: 1px solid #ebeef5;
    margin: 0 auto;
    padding: 50px;

    :deep(.el-upload-list__item) {
        width: 500px;
    }
}
</style>